Blogger'e Üst Bilgi Gadgeti Eklemek, Nasıl Eklenir?

Bazı blogger alt yapılı blogların yerleşim kısmında "Üst Bilgi" dediğmiz bu gadgetin olmadığı farkettim. Özellikle Blogger sistemine ait olan olmayan temaların bazılarında bu dediğim sorun var. Aslında şablon kısmında anlayanlar için pek de sorun sayılmaz fakat olması daha iyidir. Pratiklik açısından. Blog başlığını, bannerini veya açıklamasını istediğiniz gibi tek bir gadget üzerinden değiştirebiliyorsunuz. (Hazır gadgetler arasında bu gadget mevcut değil.)

Pratiklik, esneklik ve kolaylık açısından da çok hoş aslında. Blogger kullanıcılarının %90'ınından fazlası bunu bilir fakat; üstte de dediğim gibi internet üzerinden tema uyarlamaları yaparken, tema yapan kişiler bazen bu gadgeti eklemeyi unutuyorlar. Acemi bloggerlar için ise header kısmıyla uğraşmak önemli bir sorun olabiliyor.

Neyse lafı fazla uzatmadan, bu gadgetin Blogger üzerinde nasıl aktif edileceğinden bahsediyim. Aslında yapımı çok basit.

Kontrol panelinizden "Şablon"  kısmına girin. Açılacan sayfadan "HTML'yi Düzenle" butonuna tıklayın. İlk önce temanın tüm kodlarının yedeğini almanızı öneriririm. Yani tüm kodları CTRL+A ile seçip, CTRL+C ile kopyalayın ve CTRL+V ile bir metin belgesine tüm kodları kaydedin ki yaptığınız bir hatadan dolayı blogunuzun şablonunu tamamen kaybetmeyin. Yedeğe alma işlemini yaptıktan sonra geriye kalan tek şey ise alttaki kodu, şablondaki header kısmına yapıştırmaktır.

CTRL + F yaparak kendi blogunuzun başlığının ve açıklamasının olduğu kısma ait kodların başlangıç ve bitişlerine göre silerek, alttaki kodu yapıştırın. Ben kodlardan falan anlamam diyorsanız siz direkt olarak kodunu aratın ve alttaki kodu da içine ekleyin ve tamamdır. Kodu body içinde ekleyeceğiniz yere  göre yerleşimdeki kısmı da değişiklik gösterebiliyor.

Kod içinde şöyle bir şey var.

id='Header1' locked='true'

Bu kısımdaki tırnaklar içinde true yazmakta. Eğer yerleşim kısmından, "Üst Bilgi" gadgetini kaldırmak veya yerini değiştirmek isterseniz o kısmı false yapmanız gerekmetedir.

Alttaki kodu, "Mozilla Firefox" ile siteye giriş yaparak CTRL + C ile kopyalayabilirsiniz.

<b:section class='header1' id='header1' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='BLOGKAFEM.NET (Üstbilgi)' type='Header'> <b:includable id='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </b:includable> <b:includable id='description'> <div class='descriptionwrapper'> <p class='description'> <span><data:description/></span></p> </div> </b:includable> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "BEHIND"'> <!-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. --> <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;" + "background-repeat: no-repeat; "' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </div> <b:else/> <!--Show the image only--> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> <!--Show the description--> <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'> <b:include name='description'/> </b:if> </div> </b:if> <b:else/> <!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <h1 class='title'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </div> </b:if> </b:includable> </b:widget> </b:section>